<template>
  <el-dialog
    width="1000"
    style="height: 500px;border-radius: 12px;"
    @open="openClick()"
    @close="openClose()"
    v-model="dialogVisible1"
  >
    <el-tabs
      @tab-click="(e) => tabTitleClick(e)"
      v-model="editableTabsValue"
      class="demo-tabs"
    >
      <el-tab-pane name="1" style="height: 360px" label="工艺图">
        <iframe style="width: 100%; height: 360px" :src="httpUrl"></iframe>
      </el-tab-pane>
      <el-tab-pane name="2" label="视频监控">
        <el-tabs
          @tab-click="(e) => tabClick(e)"
          tab-position="left"
          style="height: 380px"
          v-model="tabId"
          v-if="waterNameArr.length"
        >
          <el-tab-pane
            v-for="(item, index) in waterNameArr"
            :label="item.alias"
            :key="index"
            :name="item.id"
          >
          <!-- waterNameArr[0].id -->
            <iframe style="width: 100%; height: 380px" :src="videUrl"></iframe>
          </el-tab-pane>
        </el-tabs>
        <el-empty v-else style="height: 380px" description="暂无设备接入" />
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<!-- <script setup>
import {ref} from 'vue'
const 


</script> -->


<script>
export default {
  props: {
    httpUrl: String,
    tabsModelId: String,
    // waterNameArr: Array,
    waterNameArr: {
      type: Array,
      default: () => []
    },
    videUrl: String,
    dialogVisible: Boolean,
  },

  data() {
    return {
      editableTabsValue: '1',
      dialogVisible1: true,
      tabId:''
    }
  },

  watch: {
    waterNameArr(newVal) {
      this.tabId=newVal[0].id
    }
  },
  
  methods: {
    openClick() {
      this.editableTabsValue = '1'
      this.$emit('openClick')
    },
    openClose() {
      this.$emit('openClose')
    },
    tabClick(e) {
      
      this.tabId=e.props.name
      console.log(this.tabId,'ee');
      this.$emit('tabClick', e)
    },
    tabTitleClick(e) {
     console.log(this.props,'ffffff')
      this.$emit('tabTitleClick', e)
      // this.tabId=this.waterNameArr[0].id
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__nav-wrap:after{
  background-color: transparent;
}

// ::v-deep.el-message-box__headerbtn{
//   z-index: 99 !important
// }
// :v-deep(.demo-tabs .is-top) {
//   color: #409EFF; /* 示例文字颜色 */
//   background-color: #409EFF;
// }
// ::v-deep .el-tabs__header.is-top{
//   background: red !important;
// }

/* 自定义 el-dialog 组件关闭按钮的样式 */


::v-deep .el-tabs__header.is-top{
  background-image: url('/icon/Tcbj@2x.png');
  background-repeat: no-repeat;
  background-size: contain; /* 或者使用 'cover' 来保持图片的纵横比，但填满整个容器 */
  background-position: center;
  height: 60px;
  line-height: 60px;
  top: -32px;
  margin-bottom: -7px;
  margin-right: 30px;
}
::v-deep .el-dialog__header{
  padding-bottom:0px;
}
::v-deep .el-tabs__nav-wrap{
  top: 10px;
}
</style>
